<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <table width='800' align='center' border="1">
        <tr>
            <td></td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>张三</td>
            <td>18</td>
            <td>女</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>田七</td>
            <td>20</td>
            <td>女</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>老王</td>
            <td>16</td>
            <td>男</td>
        </tr>
        <tr>
            <td colspan="3">
                <button id="allCheck">全选</button>
                <button id="fanCheck">反选</button>
            </td>
        </tr>
    </table>
    <script>
        var aInp=document.getElementsByTagName('input')
        var allCheck=document.getElementById('allCheck')
        var fanCheck=document.getElementById('fanCheck')
        allCheck.onclick=function(){
            console.log(aInp[0].checked)
            for(var i=0;i<aInp.length;i++){
                aInp[i].checked=true;
            }
        }
        fanCheck.onclick=function(){
            for(var i=0;i<aInp.length;i++){
                if(aInp[i].checked==true){
                    aInp[i].checked=false;
                }else{
                    aInp[i].checked=true;
                }
            }
        }
    </script>
</body>
</html>